<script setup>
	import { ref } from 'vue'
	import { useRouter } from 'vue-router'
	import { storeToRefs } from 'pinia'
	import { formatMonthDay, getDiffDays } from '@/utils/format-date'
	import { useCityStore } from '@/stores/modules/city'
	import { useHomeStore } from '@/stores/modules/home'
	import { useSearchStore } from '@/stores/modules/search'

	const router = useRouter()

	// 当前城市
	const cityStore = useCityStore()
	const { currentCity } = storeToRefs(cityStore)

	// 位置/城市
	const cityClick = () => {
		router.push('/city')
	}

	const positionClick = () => {
		navigator.geolocation.getCurrentPosition(
			(res) => {
				console.log('获取位置成功', res)
			},
			(error) => {
				console.log('获取位置失败', error)
			}
		)
	}
	// ------------------------------------------------------------
	// 日期范围的处里
	// 获取最新时间
	const nowDate = new Date()
	// 最新时间天数加1
	const newData = new Date().setDate(nowDate.getDate() + 1)

	// 入住时间:传入最新时间
	const startDate = ref(formatMonthDay(nowDate))
	// 离开时间:最新时间天数加1
	const endDate = ref(formatMonthDay(newData))
	// 入住天数
	const stayDay = ref(getDiffDays(nowDate, newData))

	const showCalendar = ref(false)
	const onConfirm = (value) => {
		// 1.设置日期
		const selectStarDate = value[0]
		const selectEndDate = value[1]
		startDate.value = formatMonthDay(selectStarDate)
		endDate.value = formatMonthDay(selectEndDate)
		stayDay.value = getDiffDays(selectStarDate, selectEndDate)
		// 2.隐藏日期
		showCalendar.value = false
		dateRef()
	}
	// ------------------------------------------------------------
	// 搜索
	const searchStore = useSearchStore()
	const { searchData } = storeToRefs(searchStore)

	const onSearch = (value) => {
		searchData.value = value
	}

	const onTagText = (text) => {
		searchData.value = text
	}

	const homeStore = useHomeStore()
	const { hotSuggests, date } = storeToRefs(homeStore)
	const dateRef = () => {
		date.value.startDate = startDate.value
		date.value.endDate = endDate.value
	}
	dateRef()

	// 开始搜索
	const onSerach = () => {
		router.push({
			path: '/search',
			query: {
				startDate: startDate.value,
				endDate: endDate.value,
			},
		})
	}
</script>

<template>
	<div class="nov-search">
		<!-- 位置信息 -->
		<div class="location bottom-gray-line">
			<div
				class="city"
				@click="cityClick">
				{{ currentCity.cityName }}
			</div>
			<div
				class="position"
				@click="positionClick">
				<span class="text">我的位置</span>
				<i class="iconfont icon-faxian"></i>
			</div>
		</div>

		<!-- 日期范围 -->
		<div
			class="date-range bottom-gray-line"
			@click="showCalendar = true">
			<div class="item start">
				<span class="tip">入住</span>
				<span class="time">{{ startDate }}</span>
			</div>
			<div class="stay">
				<span class="tip">共{{ stayDay }}晚</span>
			</div>
			<div class="item end">
				<span class="tip">离店</span>
				<span class="time">{{ endDate }}</span>
			</div>
		</div>
		<van-calendar
			v-model:show="showCalendar"
			@confirm="onConfirm"
			type="range"
			color="#45cfff"
			:show-confirm="false" />

		<!-- 价格 -->
		<div class="price bottom-gray-line">
			<div class="left">价格不限</div>
			<div class="right">人数不限</div>
		</div>
		<!-- 搜索 -->
		<input
			class="keyword"
			type="text"
			placeholder="关键字/位置/民宿名"
			v-model="searchData"
			@change="onSearch(searchData)" />
		<!-- 热门建议 -->
		<div class="hot-suggest">
			<template
				v-for="(item, index) in hotSuggests"
				:key="index">
				<div
					class="item"
					@click="onTagText(item.tagText.text)"
					:style="{
						color: item.tagText.color,
						background: item.tagText.background.color,
					}">
					{{ item.tagText.text }}
				</div>
			</template>
		</div>
		<!-- 搜索按钮 -->
		<div class="search-btn">
			<div
				class="btn"
				@click="onSerach">
				开始搜索
			</div>
		</div>
	</div>
</template>

<style lang="scss" scoped>
	.nov-search {
		.location {
			display: flex;
			align-items: center;
			height: 44px;
			padding: 0 20px;

			.city {
				flex: 1;
			}
			.position {
				width: 75px;
				display: flex;
				align-items: center;
				.text {
					font-size: 12px;
				}
				.iconfont.icon-faxian {
					font-size: 18px;
					margin-left: 3px;
					color: #45cfff;
				}
			}
		}
		.date-range {
			height: 44px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 5px 20px;
			.item {
				display: flex;
				flex-direction: column;
			}
			.tip {
				color: #797979;
			}
			.time {
				margin-top: 5px;
				font-size: 16px;
			}
		}
		.price {
			height: 44px;
			display: flex;
			align-items: center;
			padding: 5px 20px;
			font-size: 16px;
			color: #797979;
			.left {
				flex: 1;
			}
			.right {
				height: 100%;
				line-height: 44px;
				padding: 0 20px;
				border-left: 1px solid #f2f2f2;
			}
		}
		.keyword {
			border: none;
			height: 44px;
			line-height: 44px;
			padding: 5px 20px;
			font-size: 16px;
			color: #797979;
			// border-bottom: 1px solid #f8f7f6;
		}
		.hot-suggest {
			display: flex;
			flex-wrap: wrap;
			font-size: 12px;
			padding: 5px 10px;
			.item {
				height: 20px;
				padding: 5px 10px;
				margin: 5px;
				line-height: 20px;
				// background-color: #f2f2f2;
				border-radius: 20px;
			}
		}
		.search-btn {
			padding: 10px;
			.btn {
				width: 342px;
				height: 38px;
				font-weight: 700;
				font-size: 18px;
				line-height: 38px;
				text-align: center;
				margin: 0 auto;
				border-radius: 14px;
				color: #fff;
				background-color: var(--main-color);
			}
		}
	}
</style>
